<template>
    <div class="main">

        <van-divider><h1>WELCOME</h1></van-divider>
    
<van-form @submit="onSubmit">
  <van-field
    v-model="phones"
    label="手机号："
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' },{pattern:/^1[356789]\d{9}$/, message: '手机号格式错误' }]"
  />

      <van-field
  v-model="test"
  center
  clearable
  label="短信验证码："
  placeholder="请输入短信验证码"
  :rules="[{ required: true, message: '请填写验证码' }]"
>
  <template #button>
    <van-button size="small" type="primary" @click.stop="gettest()" :disabled="isClick">{{time}}</van-button>
  </template>
</van-field>

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
 
  
     <div class="d1">
    <a href="#" @click.prevent="jump()">账号密码登录</a>
    <a href="#" @click.prevent="register()">没有账号？去注册</a>
    </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import url from "../tools/url"
export default {
    name:"test",
    data() {
        return {
            phones:"",
            test:"",
            time:"请输入验证码",
            isClick:false
        }
    },
    methods: {
        jump(){
            this.$router.push("/login").catch(e=>{})
        },
        register(){
            this.$router.push("/register").catch(e=>{})
        },


        gettest(){
            if(/^1[3456789]\d{9}$/.test(this.phones)){
                var t=10;
                this.isClick=true;
                var times= setInterval(()=>{
                    t--;
                    this.time=t+"秒后重发";
                    if(t<1){
                        this.time="重新发送"
                        this.isClick=false;
                        clearInterval(times);
                    }

                },1000)
                Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
                this.axios.get(url.GETCODE+"?phone="+this.phones).then((pro)=>{
                if(pro.data.code==200){
                    this.test=pro.data.data;
                     Toast.success('发送成功');
                }else{
                Toast.fail(pro.data.message);
                    }
                })
               
            }
            
        },

        onSubmit(){
            Toast.loading({
            message: 'loading...',
            forbidClick: true,
        });
           var str=`phone=${this.phones}&code=${this.test}`
            this.axios.post("/user/login",str).then((pro)=>{
                if(pro.data.code==200){
                    sessionStorage.setItem("token",pro.data.data.token);
                     this.$store.commit("user_info",pro.data.data)
                    this.$router.push("/page").catch(e=>{})
                }else{
                    Toast.fail(pro.data.message);
                }
            })
        }


    },
    mounted() {
        
    },
    destroyed() {
        
    },
    computed: {

    },
}
</script>
<style scoped>
.main{
    text-align: center;
}

a{
     text-decoration:none;
     color: rgb(159, 135, 135);
}
.d1{
    width: 90%;
    margin-left: 5%;
    display: flex;
     justify-content: space-between;
    flex-wrap: wrap;
}
</style>